<template>
	<div id="ArtGallery">
		<x-header :left-options="{showBack: false}" title="艺术家库" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="listWrap">
			<div class="top">
				<img class="thumb" src="../assets/images/home/defaultImg.jpg" alt="" />
				<div class="desc">
					<p class="name">雕刻艺术家-顾建全</p>
					<p class="intro">
						<span>3</span>作品
						<span>32</span>奖项
					</p>
					<div class="cate">
						<b class="cate1">核雕艺术品</b>
						<b class="cate2">星月菩提</b>
					</div>
				</div>
				<div class="right">
					<span>国家级</span>
					<img src="../assets/images/home/icon_honor.png" alt="" />
				</div>
			</div>
			<div class="certList">
				<ul>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
					</li>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
					</li>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {

			}
		},
		components: {
			XHeader
		},
		methods: {
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.listWrap {
		margin: 0.26rem;
		background: #fff;
		padding: 0.4rem;
	}
	
	.listWrap .top {
		overflow: hidden;
	}
	
	.listWrap .top .thumb {
		width: 1.28rem;
		height: 1.28rem;
		border-radius: 50%;
		float: left;
		margin-right: 0.29rem;
	}
	
	.listWrap .top .desc {
		float: left;
		margin-right: 0.26rem;
	}
	
	.listWrap .top .desc .name {
		font-size: 0.4rem;
		color: #333;
		margin-top: 0.16rem;
	}
	
	.listWrap .top .desc .intro {
		margin-top: 0.26rem;
		font-size: 0.32rem;
		color: #777;
	}
	
	.listWrap .top .desc .intro span {
		font-size: 0.32rem;
		color: #333;
	}
	
	.listWrap .top .desc .cate {
		margin-top: 0.34rem;
	}
	
	.listWrap .top .desc .cate .cate1 {
		background: #ffb8b8;
		border: solid 1px #ff8989;
		color: #ff7474;
		height: 0.45rem;
		line-height: 0.45rem;
		padding: 0.05rem 0.26rem 0;
		border-radius: 0.05rem;
	}
	
	.listWrap .top .desc .cate .cate2 {
		background: #f8faff;
		border: solid 1px #b5c2ea;
		color: #c9d3f0;
		height: 0.45rem;
		line-height: 0.45rem;
		padding: 0.05rem 0.26rem 0;
		border-radius: 0.05rem;
		margin-left: 0.29rem;
	}
	
	.listWrap .top .right {
		float: left;
		width: 1.48rem;
		height: 0.58rem;
		position: relative;
		margin-top: 0.16rem;
	}
	
	.listWrap .top .right span {
		position: absolute;
		right: 0.17rem;
		font-size: 0.29rem;
		color: #ee4b00;
		line-height: 0.46rem;
	}
	
	.listWrap .top .right img {
		width: 100%;
	}
	
	.certList ul {
		overflow: hidden;
		margin-top: 0.4rem;
	}
	
	.certList ul li {
		float: left;
		width: 2.8rem;
		height: 2rem;
		margin-right: 0.13rem;
	}
	
	.certList ul li:last-child {
		margin-right: 0;
	}
	
	.certList ul li img {
		width: 100%;
		height: 100%;
	}
</style>